<template>
    <div id="container">
        <div v-if="loaded">
            <!--banner-->
            <div id="banner-wraper" v-if="bannerLists != ''">
                <!--有多张banner图-->
                <swiper :options="swiperOption" ref="bannerSwiper" v-if="bannerLists.length > 1">
                    <swiper-slide @transtionstart="getNum()" class="swiper-slide games" id="banner-slide" v-for="(item,index) in bannerLists" :key="index">
                        <a href="javascript:void(0);" @click="dolog('Banner',index)">
                            <img :src="item.img" alt="" :onerror="errorBannerImg">
                        </a>
                    </swiper-slide>
                    <div class="swiper-pagination" id="banner-pagination" slot="pagination"></div>
                </swiper>
                <!--只有一张banner图-->
                <div class="singleBanner" v-else>
                    <a href="javascript:void(0);" @click="dolog('Banner',0)">
                        <img :src="bannerLists[0].img" alt="" :onerror="errorBannerImg">
                    </a>
                </div>
            </div>
            <!--拼手速-->
            <div id="pss-wraper" v-if="miaoshaLists != ''">
                <div class="pss-container">
                    <p class="pss-header">
                        <img src="../assets/img/pss-title.png" alt="">
                        &nbsp;<span class="left-title">拼手速222</span><span class="right-title">0元购</span>
                    </p>
                    <!--<router-link to="./Purchase">-->
                        <!--多个0元购商品  使用swiper-->
                        <swiper :options="pssSwiperOption" ref="pssSwiper" v-if="miaoshaLists.length > 1">
                            <swiper-slide class="swiper-slide games" v-for="(item,index) in miaoshaLists" :key="index" @click="dolog('ZeroBuy',index)">
                                <div class="pss-main">
                                    <div class="pss-picture">
                                        <p>
                                            <img :src="item.topicImage" alt="" :onerror="errorPssImg">
                                        </p>
                                    </div>
                                    <div class="pss-center">
                                        <p class="goodsName">
                                            {{item.name}}
                                        </p>
                                        <p>
                            <span class="price">
                                ￥<span class="priceNum">{{item.price}}</span>
                            </span>
                                            <span class="marketPrice">
                                市场价:<span class="marketPriceNum">￥{{item.originalPrice}}</span>
                            </span>
                                        </p>
                                        <div class="stock-wraper">
                                            <p>
                                                <span class="stockLine" :style="'width:'+ ((item.kucun / item.total) * 100) +'%;'"></span>
                                            </p>
                                            <span class="stockNum">{{item.kucun}}张</span>
                                        </div>
                                    </div>
                                    <div class="pss-right" v-if="nowtamp < starttamp">
                                        <p class="countDown">
                                            距离开抢&nbsp;
                                            <span>{{leftTime.hour}}</span> : <span>{{leftTime.minute}}</span> : <span>{{leftTime.second}}</span>
                                        </p>
                                        <p class="ljq-btn">
                                            <span>
                                                <img src="../assets/img/fire.png" alt="">
                                                立即抢
                                            </span>
                                        </p>
                                    </div>
                                    <div class="pss-right" v-else>
                                        <p class="ljq-btn">
                                            <span>
                                                火爆开抢中
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </swiper-slide>
                        </swiper>
                        <!--一个商品-->
                        <div class="pss-main" @click="dolog('ZeroBuy',0)" v-else>
                            <div class="pss-picture">
                                <p>
                                    <img :src="miaoshaLists.topicImage" alt="" :onerror="errorPssImg">
                                </p>
                            </div>
                            <div class="pss-center">
                                <p class="goodsName">
                                    {{miaoshaLists.name}}
                                </p>
                                <p>
                            <span class="price">
                                ￥<span class="priceNum">{{miaoshaLists.price}}</span>
                            </span>
                                    &nbsp;
                                    <span class="marketPrice">
                                市场价:<span class="marketPriceNum">￥{{miaoshaLists.originalPrice}}</span>
                            </span>
                                </p>
                                <div class="stock-wraper">
                                    <p>
                                        <span class="stockLine" :style="'width:'+ ((miaoshaLists.kucun / miaoshaLists.total) * 100) +'%;'"></span>
                                    </p>
                                    <span class="stockNum">{{miaoshaLists.kucun}}张</span>
                                </div>
                            </div>
                            <div class="pss-right" v-if="nowtamp < starttamp">
                                <p class="countDown">
                                    距离开抢&nbsp;
                                    <span>{{leftTime.hour}}</span> : <span>{{leftTime.minute}}</span> : <span>{{leftTime.second}}</span>
                                </p>
                                <p class="ljq-btn">
                                    <span>
                                        <img src="../assets/img/fire.png" alt="">
                                        立即抢
                                    </span>
                                </p>
                            </div>
                            <div class="pss-right" v-else>
                                <p class="ljq-btn">
                                    <span>
                                        火爆开抢中
                                    </span>
                                </p>
                            </div>
                        </div>
                    <!--</router-link>-->
                </div>
            </div>
            <!--跑马灯-->
            <div id="adcolumn-wraper" v-if="adcolumnLists != ''">
                <div class="adcolumn-lists">
                    <!--多个-->
                    <swiper :options="adcolumnSwiperOption" ref="adcolumnSwiper" v-if="adcolumnLists.length > 1">
                        <swiper-slide class="swiper-slide games swiper-no-swiping" id="adcolumn-swiper-list" v-for="(item,index) in adcolumnLists" :key="index">
                            <a class="adcolumn-list" href="javascript:void(0);" @click="dolog('GongGao',index)">
                                <img :src="item.img" alt="" :onerror="errorAdcolumnImg">
                                <span>{{item.title}}</span>
                            </a>
                        </swiper-slide>
                    </swiper>
                    <!--单个-->
                    <a class="adcolumn-list" href="javascript:void(0);" @click="dolog('GongGao',0)" v-else>
                        <img :src="adcolumnLists[0].img" alt="" :onerror="errorAdcolumnImg">
                        <span>{{adcolumnLists[0].title}}</span>
                    </a>
                </div>
            </div>
            <!--限时活动-->
            <div id="timeLimit-wraper" v-if="timeLimitLists != ''">
                <div class="timeLimit-header">
                    <img src="../assets/img/clock.png" alt="">&nbsp;
                    <span>限时活动</span>
                </div>
                <div class="timeLimit-container">
                    <!--1个-->
                    <div class="timeLimit-one-main" v-if="timeLimitLists.length == 1">
                        <a href="javascript:void(0);" @click="dolog('XianShiAct',0)">
                            <img :src="timeLimitLists[0].img" alt="" :onerror="errorTimeLImitImg">
                        </a>
                    </div>
                    <!--2个-->
                    <div class="timeLimit-two-main" v-else-if="timeLimitLists.length == 2">
                        <a href="javascript:void(0);" v-for="(item,index) in timeLimitLists" @click="dolog('XianShiAct',index)" :key="index">
                            <img :src="item.img" alt="" :onerror="errorTimeLImitImg">
                        </a>
                    </div>
                    <!--多个-->
                    <div class="timeLimit-more-main" v-else>
                        <swiper :options="timeLimitSwiperOption" ref="timeLimitSwiper">
                            <swiper-slide class="swiper-slide games" v-for="(item,index) in timeLimitLists" :key="index">
                                <a href="javascript:void(0);" @click="dolog('XianShiAct',index)">
                                    <img :src="item.img" alt="" :onerror="errorTimeLImitImg">
                                </a>
                            </swiper-slide>
                        </swiper>
                    </div>
                </div>
                <div class="timeLimit-bottom">
                    <a href="javascript:void(0);" @click="dolog('Wheel',0)">
                        <p>
                            <span>{{daySignInfo}}</span>
                            <img :src="qcjPicUrl" alt="">
                        </p>
                    </a>
                </div>
                <img :src="daySignPicUrl" alt="" class="daySignPic">
            </div>
            <!--领优惠-->
            <div id="lyh-wraper" v-if="lyhLists != ''">
                <div class="lyh-header">
                    <img src="../assets/img/lyh-title.png" alt="">&nbsp;
                    <span>领优惠</span>
                    <a :href="lyhMoreUrl" v-if="lyhMoreUrl != ''">
                        更多 <span> ></span>
                    </a>
                </div>
                <div class="lyh-container">
                    <!--1个-->
                    <div class="lyh-one-main" v-if="lyhLists.length == 1">
                        <div>
                            <a href="javascript:void(0);" @click="dolog('LingYouHui',0)">
                                <img :src="item.img" :onerror="errorLyhImg" alt="">
                                <div>
                                    <p class="goodsName">{{lyhLists[0].name}}</p>
                                    <p class="price-wraper">
                                        <span class="price">{{lyhLists[0].price}}元</span>&nbsp;
                                        <span class="marketPrice">市场价：{{lyhLists[0].originalPrice}}元</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!--2个-->
                    <div class="lyh-two-main" v-else-if="lyhLists.length == 2">
                        <div v-for="(item,index) in lyhLists" :key="index" class="lyh-list">
                            <a href="javascript:void(0);" @click="dolog('LingYouHui',index)">
                                <img :src="item.img" :onerror="errorLyhImg" alt="">
                                <div>
                                    <p class="goodsName">{{item.name}}</p>
                                    <p class="price-wraper">
                                        <span class="price">{{item.price}}元</span>&nbsp;
                                        <span class="marketPrice">市场价：{{item.originalPrice}}元</span>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!--多个-->
                    <div class="lyh-more-main" v-else>
                        <swiper :options="lyhSwiperOption" ref="lyhSwiper">
                            <swiper-slide class="swiper-slide games" v-for="(item,index) in lyhLists" :key="index">
                                <div class="lyh-list">
                                    <a href="javascript:void(0);" @click="dolog('LingYouHui',index)">
                                        <img :src="item.img" :onerror="errorLyhImg" alt="">
                                        <div>
                                            <p class="goodsName">{{item.name}}</p>
                                            <p class="price-wraper">
                                                <span class="price">{{item.price}}元</span>&nbsp;
                                                <span class="marketPrice">市场价：{{item.originalPrice}}元</span>
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            </swiper-slide>
                        </swiper>
                    </div>
                </div>
            </div>
            <!--游戏中心-->
            <div id="gameCenter-wraper" v-if="gameLists != ''">
                <div class="gameCenter-header">
                    <img src="../assets/img/game-title.png" alt="">&nbsp;
                    <span>游戏中心</span>
                    <router-link to="./GameList" v-if="gameMoreUrl != ''">
                        更多 <span> ></span>
                    </router-link>
                </div>
                <div class="gameCenter-container">
                    <swiper :options="gameSwiperOption" ref="gameSwiper">
                        <swiper-slide class="swiper-slide games" v-for="(item,index) in gameLists" :key="index" v-if="index%2 == 0">
                            <a href="javascript:void(0);" @click="dolog('GameCent',index)">
                                <div class="left">
                                    <p>
                                        <img :src="gameLists[index].img" alt="" :onerror="errorGameImg">
                                    </p>
                                </div>
                                <div class="right">
                                    <p class="gameName">{{gameLists[index].name}}</p>
                                    <p class="tags">{{gameLists[index].describe}}</p>
                                </div>
                            </a>
                            <a href="javascript:void(0);" @click="dolog('GameCent',index+1)">
                                <div class="left">
                                    <p>
                                        <img :src="gameLists[index+1].img" alt="" :onerror="errorGameImg">
                                    </p>
                                </div>
                                <div class="right">
                                    <p class="gameName">{{gameLists[index+1].name}}</p>
                                    <p class="tags">{{gameLists[index+1].describe}}</p>
                                </div>
                            </a>
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
            <!--热门活动-->
            <div id="hotActivity-wraper" v-if="hotActivityLists != ''">
                <div class="hotActivity-header">
                    <img src="../assets/img/hot-title.png" alt="">&nbsp;
                    <span>热门活动</span>
                    <a :href="hotMoreUrl" v-if="hotMoreUrl != ''">
                        更多 <span> ></span>
                    </a>
                </div>
                <div class="hotActivity-container">
                    <ul>
                        <li v-for="(item,index) in hotActivityLists" :key="index" v-if="index%2 == 0">
                            <a href="javascript:void(0);" @click="dolog('HotAct',index)">
                                <img :src="item.img" alt="" :onerror="errorHotActivityImg">
                            </a>
                            <div>
                                <p class="goodsName">{{item.name}}</p>
                                <p class="goodsInfo">
                                    <span>{{item.label}}</span>
                                </p>
                                <p class="clickZan" @click="follow(index,item.id,item.status)">
                                    <!--点过赞-->
                                    <img src="../assets/img/zan.png" alt="" v-if="item.status == 1">
                                    <!--未点过赞-->
                                    <img src="../assets/img/noZan.png" alt="" v-else>
                                    <span>{{item.like}}</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li v-for="(item,index) in hotActivityLists" :key="index" v-if="index%2 != 0">
                            <a href="javascript:void(0);" @click="dolog('HotAct',index)">
                                <img :src="item.img" alt="" :onerror="errorHotActivityImg">
                            </a>
                            <div>
                                <p class="goodsName">{{item.name}}</p>
                                <p class="goodsInfo">
                                    <span>{{item.label}}</span>
                                </p>
                                <p class="clickZan" @click="follow(index,item.id,item.status)">
                                    <!--点过赞-->
                                    <img src="../assets/img/zan.png" alt="" v-if="item.status == 1">
                                    <!--未点过赞-->
                                    <img src="../assets/img/noZan.png" alt="" v-else>
                                    <span>{{item.like}}</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="scrollTrue" v-if="loadmoreBol && hotActivityLists != ''">
                    <img src="../assets/img/loadMore.gif" alt="">
                    加载中，请稍候
                </div>
                <p class="scrollFalse" v-if="hotActivityLists != '' && !loadmoreBol">{{txt}}</p>
            </div>

            <!--<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>-->

            <!--免责声明-->
            <div id="mzsm-wraper">
                <p>
                    天乐邦版权所有 · <a :href="mzsmJumpUrl()">免责声明</a>
                </p>
            </div>
        </div>
        <loading-box :message="loadingList" v-if="loadingList.show"></loading-box>
    </div>
</template>

<script>
    import loading from './public/loading'

    export default {
        name: "Home",
        components: {
            'loading-box': loading
        },
        metaInfo: {
            title: '招商银行信用卡'
        },
        data () {
            const self = this
            return {
                route: '',  //
                platcode:'ZHWZ',  //平台code
                loaded: false,  //数据是否全部加载完
                errorBannerImg: 'this.src="' + require('../assets/img/placeholder640x300.png') + '"',  //banner图占位图
                errorTimeLImitImg: 'this.src="' + require('../assets/img/timeLimit-default.png') + '"',  //限时活动图占位图
                errorLyhImg: 'this.src="' + require('../assets/img/placeholder320x192.png') + '"',  //领优惠占位图
                errorPssImg: 'this.src="' + require('../assets/img/error2.png') + '"',  //秒杀占位图
                errorGameImg: 'this.src="' + require('../assets/img/game-default.png') + '"',  //游戏中心占位图
                errorHotActivityImg: 'this.src="' + require('../assets/img/hotActivity-default.png') + '"',  //热门活动占位图
                errorAdcolumnImg: 'this.src="' + require('../assets/img/adcolumn-default.png') + '"',  //公告跑马灯占位图
                // mzsmJumpUrl: 'https://m.zwmedia.com.cn/wxzspfse/index.php/Home/Index/disclaimer/platcode/ZHWZ.html',  //免责声明 url
                lyhMoreUrl: 'https://m.zwmedia.com.cn/wxzspfse/?platcode=ZHWZ',  //领优惠 更多url
                gameMoreUrl: 'javascript:void(0);',  //游戏中心 更多url
                hotMoreUrl: 'https://oauth.cc.cmbchina.com/OauthPortal/wechat/oauth?callback_uri=https%3A%2F%2Fweclub.ccc.cmbchina.com%2FSCRMActivity%2Fac-activity%2Findex%3FisFans%3Dfalse&oauth_id=01df10fb&scope=snsapi_base',  //热门活动 更多url
                daySignPicUrl: './static/img/wheel.png',  //小招日签入口小图
                qcjPicUrl: './static/img/qcj.png',  //去抽奖图片
                daySignJumpUrl: 'https://m.zwmedia.com.cn/wxzspfse/index.php/Home/Wheel/zhWelcome/platcode/ZHCJ',   //小招日签入口链接
                daySignInfo: '幸运大转盘每日抽奖，100%有礼！', //文字描述
                scroll: false,   //是否可以加载更多
                loadmoreBol: false,  //显示加载中还是上拉加载更多 (true：加载中，false：上拉加载更多)
                txt: '上拉加载更多',  //底部加载文案
                timer: null,   //加载更多延时定时器
                nowtamp: '',    //当前的时间戳
                starttamp: '',  //开始时间戳
                countDownTimer: null,  //倒计时定时器
                second: '',   //剩余时间戳
                shareInfo: [],  //分享信息
                leftTime:{
                    hour: '',
                    minute: '',
                    second: ''
                },  //剩余时间
                loadingList:{
                    msg:'',
                    show:''
                },
                page: 1,
                pageNum: 6,
                bannerLists: [], //banner位数据
                miaoshaLists: [],   //0元购秒杀活动列表
                adcolumnLists: [],   //跑马灯列表
                timeLimitLists: [],   //限时活动列表
                lyhLists: [],   //领优惠列表
                gameLists: [],   //游戏中心列表
                hotActivityLists: [],  //热门活动列表
                swiperOption: {
                    //banner图滑动
                    autoplay: {
                        disableOnInteraction: false, //用户操作后是否禁止自动循环
                        delay: 3000 //自自动循环时间
                    }, //可选选项，自动滑动
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: true, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: false,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    lazyLoadingInPrevNext: true,
                    pagination: {
                        el: '#banner-pagination',
                        type : 'bullets', //分页器形状
                        clickable: true, //点击分页器的指示点分页器会控制Swiper切换
                    }
                },
                pssSwiperOption:{
                    //0元购swiper
                    autoplay: {
                        disableOnInteraction: false, //用户操作后是否禁止自动循环
                        delay: 5000 //自自动循环时间
                    }, //可选选项，自动滑动
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: false, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                },
                adcolumnSwiperOption:{
                    //跑马灯swiper
                    autoplay: {
                        disableOnInteraction: false, //用户操作后是否禁止自动循环
                        delay: 4000 //自自动循环时间
                    }, //可选选项，自动滑动
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: true, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    direction: 'vertical'  //滚动方向
                },
                timeLimitSwiperOption:{
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: false, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    freeMode: false,
                    slidesPerView: 2.3,
                    spaceBetween:15
                },
                lyhSwiperOption: {
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: false, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    // freeMode: true,
                    slidesPerView: 2.4,
                    spaceBetween:10
                },
                gameSwiperOption: {
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: false, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    // freeMode: true,
                    slidesPerView: 2,
                    spaceBetween:8
                },
                sid: ''
            }
        },
        computed: {
            bannerSwiper() {
                return this.$refs.bannerSwiper.swiper
            }
        },
        mounted (){
            let _this = this;
            _this.loading = true;
            _this.platcode = _this.getParamString('platcode');
            _this.route = _this.getParamString('route');
            _this.sid = window.sessionStorage.getItem('sid');
            _this.loadingList = {
                msg: '加载中...',
                show: true
            };
            window.addEventListener('scroll',function (){
                //监听滚动事件
                _this.handleScroll();
            });
        },
        methods: {
            //获取url信息
            getParamString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
                if(r!=null)return  unescape(r[2]); return null;
            },
            showMsgbox(msg){
                //弹框函数
                this.$msgbox({
                    content:msg,
                    className:'pop-custom'
                });
            },
            mzsmJumpUrl (){
                return   process.env.API_HOST+'/wxzspfse/index.php/Home/Index/disclaimer/platcode/'+this.platcode+'.html';
            },
            getData() {
                let _this = this;
                _this.platcode = _this.getParamString('platcode');
                _this.sid = window.sessionStorage.getItem('sid');
                let data = {
                    platcode: _this.platcode,
                    zwtoken: _this.sid
                };
                let gameData = {
                    type: 0,
                    page:1,
                    pageNum: 6,
                    zwtoken: _this.sid
                };
                let hotData = {
                    page: _this.page,
                    pageNum: _this.pageNum,
                    zwtoken: _this.sid
                }

                _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'yhzx_index/index?platcode='+_this.platcode, 'POST', _this.$qs.stringify(data)).then(res => {
                    if (res.status == 0) {
                        if (res.zeroBuy == '' || res.zeroBuy == null) {
                            _this.miaoshaLists = [];
                        } else {
                            if (res.zeroBuy.length == 1) {
                                _this.miaoshaLists = res.zeroBuy[0];
                            } else {
                                _this.miaoshaLists = res.zeroBuy;
                            }
                            _this.starttamp = res.zeroBuy[0].onlinetime;
                        }
                        _this.nowtamp = res.time;
                        _this.bannerLists = res.banner;
                        _this.adcolumnLists = res.gongGao;
                        _this.timeLimitLists = res.xianShiAct;
                        _this.lyhLists = res.lingYouHui;

                        //加载游戏中心
                        // _this.$http.getAxio(_this.sid,0,process.env.API_HOST+_this.$http.urlHead+'yhzx_index/getGameCenter?platcode='+_this.platcode,'POST',_this.$qs.stringify(gameData)).then(res1 => {
                        //     // console.log(res);
                        //     _this.scroll = false;//禁止加载出来前多次请求
                        //     if (res1.status == 0){
                        //         _this.gameLists = res1.data;
                        //     }
                        //     if(res1.status == 0 || res1.status == 1) {

                                //加载热门活动列表
                                _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'yhzx_index/getHotActList?platcode='+_this.platcode,'POST',_this.$qs.stringify(hotData)).then(res2 => {

                                    if(res2.status == 0) {

                                        if (res2.data != ''){
                                            if (res2.data.length < _this.pageNum){
                                                //数据不够展示一页的
                                                _this.scroll = false;
                                                _this.loadmoreBol = false;
                                                _this.txt = '暂无更多活动';
                                            }else{
                                                //还有数据，或者最后的数据刚好{{pageNum}}个
                                                _this.scroll = true;
                                                _this.loadmoreBol = false;
                                                _this.txt = "上拉加载更多";
                                            }
                                            _this.hotActivityLists = res2.data;
                                        }
                                    }else{
                                        _this.scroll = false;
                                        _this.loadmoreBol = false;
                                        _this.txt = "加载出错，请刷新页面";
                                    }
                                });
                            // }else if(res1.status == -99){
                            //     _this.showMsgbox(res1.msg);
                            // }

                        // })
                            // .catch(function (error){
                            //     _this.scroll = false;
                            //     console.log(error);
                            // });
                    }else if(res.status == -99){
                        _this.showMsgbox(res.msg);
                    }
                    _this.loadingList = {
                        msg: '',
                        show: false,
                        cancelBol:false
                    };
                    _this.loaded = true;
                    _this.countDown();
                });
            },
            getParamString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
                if(r!=null)return  unescape(r[2]); return null;
            },
            getMore() {
                let _this = this;
                _this.page++;
                let data = {
                    page: _this.page,
                    pageNum: _this.pageNum,
                    zwtoken: _this.sid
                };
                _this.scroll = false;//禁止加载出来前多次请求
                _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'yhzx_index/getHotActList?platcode='+_this.platcode,'POST',_this.$qs.stringify(data)).then(res => {


                    if(res.status == 0) {
                        if (res.data != ''){
                            if (res.data.length < _this.pageNum){
                                //数据不够展示一页的
                                _this.scroll = false;
                                _this.loadmoreBol = false;
                                _this.txt = "暂无更多活动";
                            }else{
                                //还有数据，或者最后的数据刚好{{numPerPage}}个
                                _this.scroll = true;
                                _this.loadmoreBol = false;
                                _this.txt = "上拉加载更多";
                            }
                            res.data.forEach(function (val,index){
                                _this.hotActivityLists.push(val);
                            });

                        }else{
                            _this.scroll = false;
                            _this.loadmoreGameBol = false;
                            _this.txt = "暂无更多活动";
                        }
                        clearTimeout(_this.timer);
                        _this.timer = null;
                    }else{
                        _this.scroll = false;
                        _this.loadmoreGameBol = false;
                        _this.txt = "暂无更多活动";
                        // _this.showMsgbox(res.msg);
                    }

                }).catch(function (error){
                    _this.scroll = false;
                    _this.loadmoreBol = false;
                    console.log(error);
                });

            },
            handleScroll (){
                //处理滚动事件函数

                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                //触发条件：滚动条距离顶部的距离加可视窗口的高度大于等于页面内容总高度的时候

                if(scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight){
                    //未 全部加载完时
                    if (this.scroll){
                        this.loadmoreBol = true;  //显示loading加载中
                        if (!this.timer){
                            this.timer = setTimeout(() =>{
                                this.getMore();
                            },700);
                        }
                    }else{
                        this.loadmoreBol = false;
                    }

                }else{
                    // this.scroll=false;
                    // this.loadmoreBol = false;
                }
            },
            follow(idx,id,status){
                let _this = this;
                let data = {
                    id: id,
                    zwtoken: _this.sid
                };
                if (status == 1){
                    // 已点赞
                }else if(status == 0){
                //    商品未点过赞，可点赞
                    _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'yhzx_index/doLikeByHotAct?platcode='+_this.platcode,'POST',_this.$qs.stringify(data)).then(res => {

                        if (res.status == 0){
                        //    成功
                            _this.hotActivityLists[idx].like = parseInt(_this.hotActivityLists[idx].like,10) + 1;
                            _this.hotActivityLists[idx].status = 1;
                        }else{
                            _this.showMsgbox(res.msg);
                        }
                    });

                }
            },
            countDown() {
                let _this = this;
                if (_this.starttamp <= _this.nowtamp){
                    return false;
                }else{
                    _this.second = parseInt(_this.starttamp - _this.nowtamp, 10);
                    let d = parseInt(_this.second / 60 / 60 / 24, 10);
                    let h = parseInt(_this.second / 60 / 60 % 24, 10) + d*24;
                    let m = parseInt(_this.second / 60 % 60, 10);
                    let s = parseInt(_this.second % 60, 10);
                    _this.leftTime = {
                        hour: _this.checkTime(h),
                        minute: _this.checkTime(m),
                        second: _this.checkTime(s)
                    };
                    _this.countDownTimer = setInterval(() => {
                        _this.second--;
                        let d = parseInt(_this.second / 60 / 60 / 24, 10);
                        let h = parseInt(_this.second / 60 / 60 % 24, 10) + d*24;
                        let m = parseInt(_this.second / 60 % 60, 10);
                        let s = parseInt(_this.second % 60, 10);
                        if (h == 0 && m == 0 && s == 0){
                            clearInterval(_this.countDownTimer);
                            _this.getData();
                        }
                        _this.leftTime = {
                            hour: _this.checkTime(h),
                            minute: _this.checkTime(m),
                            second: _this.checkTime(s)
                        }
                    },1000);
                }
            },
            checkTime(i){ //将0-9的数字前面加上0，例1变为01
                if(i<10){
                    i = "0" + i;
                }
                return i;
            },
            dolog(name,index){
                let _this = this;
                let keyCode = 'index'+parseInt(index+1,10);
                if (name == 'GameCent'){
                    var data1 = '[{"action": "Yhzx/'+name+'/ClickCount/","data": {'+keyCode+': 1,}},{"action": "GameCenterClick","data": {id: '+_this.gameLists[index].id+'}}]';
                }else{
                    var data1 = '[{"action": "Yhzx/'+name+'/ClickCount/","data": {'+keyCode+': 1,}}]';
                }

                var data2 = eval('(' + data1 + ')');
                let jsonData = {
                    data: data2,
                    platcode: _this.platcode,
                    zwtoken: _this.sid
                };
                let dologUrl=process.env.API_HOST+_this.$http.urlHead+'public_controller/doLogYhzxIndex?platcode='+_this.platcode;
                if(_this.route == 'fast')
                {
                	dologUrl=process.env.API_HOST+'/cYouHuiZhongXin/fastapi/dolog.php';
                	
                	//let keyCode = 'index'+parseInt(index+1,10);
	                let uid = _this.getParamString("userId");
	                if (uid){
	                    jsonData.uid=uid;
	                    /*jsonData.platform_id=?;
	                    let data = {
	                        uid: uid,
	                        platform_id: _this.platcode,
	                        action: 'ZeroBuy/TimeStatus/ClickCount/',
	                        content: '点击',
	                        details: keyCode
	                    };*/
	                }
                }
                _this.$http.getAxio(1,dologUrl,'POST',jsonData).then(res => {
                    if (res.status == 0){
                        if (name == 'Banner'){
                            if (_this.bannerLists != ''){
                                window.location.href = _this.bannerLists[index].url;
                            }
                        }else if(name == 'GongGao'){
                            if (_this.adcolumnLists != ''){
                                window.location.href = _this.adcolumnLists[index].url;
                            }
                        }else if(name == 'XianShiAct'){
                            if (_this.timeLimitLists != ''){
                                window.location.href = _this.timeLimitLists[index].url;
                            }
                        }else if(name == 'LingYouHui'){
                            if (_this.lyhLists != ''){
                                window.location.href = _this.lyhLists[index].url;
                            }
                        }else if(name == 'GameCent'){
                            if (_this.gameLists != ''){
                                window.location.href = _this.gameLists[index].url;
                            }
                        }else if(name == 'HotAct'){
                            if (_this.hotActivityLists != ''){
                                window.location.href = _this.hotActivityLists[index].url;
                            }
                        }else if(name == 'Wheel'){
                            window.location.href = _this.daySignJumpUrl;
                        }else if(name == 'ZeroBuy'){
                            if (_this.miaoshaLists != ''){
                                _this.$router.push({
                                    name: 'Purchase'
                                });
                            }
                        }
                    }
                });
            }
        },
        created () {
            let _this = this;
            _this.getData();
        }
    }
</script>

<style lang="scss" scoped>
    a{
        color: #333;
        text-decoration: none;
    }
    #banner-wraper{
        width: 100%;
        #banner-slide{
            width: 100%;
            a{
                width: 100%;
                display: inline-block;
            }
        }
        .singleBanner{
            width: 100%;
            a{
                width: 100%;
                display: inline-block;
                img{
                    width: 100%;
                }
            }
        }
        .swiper-slide{
            width: 100%;
            display: inline-block;
            img{
                width: 100%;
                height: auto;
            }
        }
        #banner-pagination{
            .swiper-pagination-bullet{
                width: 20px;
                border-radius: 0;
            }
        }
        #banner-pagination {
            .swiper-pagination-bullet-active{
                background: white;
            }
        }
    }
    #pss-wraper{
        width: 100%;
        background-color: white;
        position: relative;
        top: -10px;
        .pss-container{
            width: 100%;
            padding: 30px;
            box-sizing: border-box;
            .pss-header{
                height: 30px;
                line-height: 30px;
                margin-bottom: 30px;
                display: inline-block;
                img{
                    height: 30px;
                    position: relative;
                    top: 2px;
                }
                .left-title{
                    color: #333;
                    font-size: 30px;
                    font-weight: 700;
                }
                .right-title{
                    color: #ff4102;
                    font-size: 30px;
                    font-weight: 700;
                }
            }
            .pss-main{
                width: 100%;
                box-sizing: border-box;
                display: table;
                .pss-picture{
                    width: 108px;
                    display: table-cell;
                    vertical-align: middle;
                    padding-right: 30px;
                    p{
                        width: 108px;
                        border-radius: 15px;
                        overflow: hidden;
                        img{
                            width: 108px;
                            border-radius:15px;
                        }
                    }
                }
                .pss-center{
                    width: 290px;
                    display: table-cell;
                    vertical-align: middle;
                    padding-right: 30px;
                    .goodsName{
                        font-size: 28px;
                        color: #333;
                    }
                    .price{
                        color: #ff4102;
                        font-size: 30px;
                        .priceNum{
                            font-size: 42px;
                            font-weight: 700;
                            position: relative;
                            top: 3px;
                        }
                    }
                    .marketPrice{
                        color: #999;
                        font-size: 20px;
                        position: relative;
                        top: -1px;
                        .marketPriceNum{
                            text-decoration: line-through;
                        }
                    }
                    .stock-wraper{
                        overflow: hidden;
                        p{
                            width: 180px;
                            height: 20px;
                            line-height: 22px;
                            border-radius: 10px;
                            border:1px solid #ff4102;
                            box-sizing: border-box;
                            overflow: hidden;
                            float: left;
                            .stockLine{
                                width: 10px;
                                height: 20px;
                                display: inline-block;
                                background: linear-gradient(to right,#ff4102,#ff9900);
                            }
                        }
                        .stockNum{
                            height: 20px;
                            line-height: 22px;
                            font-size: 18px;
                            color: #999;
                            display: inline-block;
                            float: left;
                            margin-left: 20px;
                        }
                    }

                }
                .pss-right{
                    width: 232px;
                    display: table-cell;
                    vertical-align: middle;
                    .countDown{
                        color: #999;
                        font-size: 20px;
                        font-weight: bold;
                        span{
                            display: inline-block;
                            padding: 2px 5px 0px;
                            background-color: #ff6633;
                            color: #fff;
                            font-weight: 100;
                        }
                    }
                    .ljq-btn{
                        width: 220px;
                        height: 60px;
                        font-size: 34px;
                        background-color: #ff4102;
                        color: #fff;
                        display: table;
                        margin-top: 20px;
                        border-radius: 30px;
                        span{
                            display: table-cell;
                            vertical-align: middle;
                            text-align: center;
                            position: relative;
                            top: -2px;
                            img{
                                width: 34px;
                                position: relative;
                                top: 8px;
                            }
                        }
                    }
                }
            }
        }
    }
    #adcolumn-wraper{
        width: 100%;
        height: 80px;
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: -8px;
        background-color: #fff;
        overflow: hidden;
        .adcolumn-lists{
            width: 100%;
            height: 40px;
            padding: 20px 0;
            .swiper-container{
                height: 40px;
                .adcolumn-list{
                    display: inline-block;
                    width: 100%;
                    height: 40px;
                    overflow: hidden;
                    img{
                        width: 80px;
                        float: left;
                    }
                    span{
                        width: 580px;
                        display: block;
                        float: left;
                        font-size: 26px;
                        color: #333;
                        position: relative;
                        top: 2px;
                        margin-left: 20px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                }
            }

        }
    }
    #timeLimit-wraper{
        width: 100%;
        padding: 25px 30px;
        box-sizing: border-box;
        background-color: #ff4102;
        position: relative;
        .timeLimit-header{
            color: #fff;
            img{
                width: 34px;
                position: relative;
                top: 6px;
            }
            span{
                font-size: 30px;
                font-weight: 700;
            }
        }
        .timeLimit-container{
            width: 100%;
            margin-top: 25px;
            .timeLimit-one-main{
                width: 100%;
                a{
                    width: 70%;
                    display: inline-block;
                    margin-left: 15%;
                    border-radius: 25px;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
            }
            .timeLimit-two-main{
                width: 100%;
                overflow: hidden;
                a{
                    width: 48%;
                    display: inline-block;
                    float: left;
                    border-radius: 15px;
                    overflow: hidden;
                    &:nth-child(2){
                        margin-left: 4%;
                    }
                    img{
                        width: 100%;
                    }
                }
            }
            .timeLimit-more-main{
                width: 100%;
                overflow: hidden;
                a{
                    display: inline-block;
                    border-radius: 15px;
                    float: left;
                    overflow: hidden;
                    &:nth-child(2n){
                        margin-left: 4%;
                    }
                    img{
                        width: 100%;
                        border-radius: 15px;
                    }
                }
            }
        }
        .timeLimit-bottom{
            width: 90%;
            height: 50px;
            border-radius: 25px;
            margin-left: 5%;
            margin-top: 30px;
            background-color: rgba(255,255,255,.8);
            display: table;
            a{
                width: 100%;
                display: table-cell;
                vertical-align: middle;
                p{
                    width: 100%;
                    position: relative;
                    span{
                        color: #ff4102;
                        font-size: 24px;
                        margin-left: 60px;
                    }
                    img{
                        height: 24px;
                        position: absolute;
                        right: 15px;
                        top: 5px;
                    }
                }
            }
        }
        .daySignPic{
            width: 80px;
            position: absolute;
            bottom: 17px;
            left: 40px;
        }
    }
    #lyh-wraper{
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        background-color: #fff;
        .lyh-header{
            img{
                height: 30px;
                position: relative;
                top: 3px;
            }
            span{
                font-size: 30px;
                color: #333;
                font-weight: 700;
            }
            a{
                font-size: 22px;
                color: #666;
                position: absolute;
                right: 30px;
                span{
                    font-size: 32px;
                    color: #ccc;
                    position: relative;
                    top: 2px;
                }
            }
        }
        .lyh-one-main{
            width: 100%;
            a{
                width: 70%;
                display: inline-block;
                border: 2px solid #eee;
                border-radius: 25px;
                box-sizing: border-box;
                overflow: hidden;
                margin-left: 15%;
                margin-top: 20px;
                img{
                    width: 100%;
                }
                div{
                    width: 100%;
                    padding: 10px 20px;
                    box-sizing: border-box;
                    .goodsName{
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        font-size: 28px;
                        color: #333;
                    }
                    .price-wraper{
                        width: 100%;
                        .price{
                            font-size: 28px;
                            color: #ff3333;
                        }
                        .marketPrice{
                            font-size: 20px;
                            color: #999;
                            text-decoration: line-through;
                        }
                    }
                }
            }
        }
        .lyh-two-main{
            width: 100%;
            overflow: hidden;
            .lyh-list{
                width: 48%;
                float: left;
                margin-top: 20px;
                overflow: hidden;
                border: 2px solid #eee;
                border-radius: 15px;
                box-sizing: border-box;
                &:nth-child(2){
                    margin-left: 4%;
                }
                a{
                    width: 100%;
                    display: inline-block;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                    div{
                        width: 100%;
                        padding: 10px 20px;
                        box-sizing: border-box;
                        .goodsName{
                            width: 100%;
                            height: 30px;
                            line-height: 30px;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                            font-size: 24px;
                            color: #333;
                        }
                        .price-wraper{
                            width: 100%;
                            .price{
                                font-size: 24px;
                                color: #ff3333;
                            }
                            .marketPrice{
                                font-size: 14px;
                                color: #999;
                                text-decoration: line-through;
                            }
                        }
                    }
                }
            }
        }
        .lyh-more-main{
            width: 100%;
            .lyh-list{
                width: 100%;
                margin-top: 20px;
                overflow: hidden;
                border: 2px solid #f3f3f3;
                border-radius: 15px;
                box-sizing: border-box;
            }
            a{
                width: 100%;
                display: inline-block;
                overflow: hidden;
                img{
                    width: 100%;
                }
                div{
                    width: 100%;
                    padding: 10px 20px;
                    box-sizing: border-box;
                    .goodsName{
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        font-size: 24px;
                        color: #333;
                    }
                    .price-wraper{
                        width: 100%;
                        .price{
                            font-size: 24px;
                            color: #ff3333;
                        }
                        .marketPrice{
                            font-size: 14px;
                            color: #999;
                            text-decoration: line-through;
                        }
                    }
                }
            }
        }
    }
    #gameCenter-wraper{
        width: 100%;
        padding: 30px;
        margin-top: 20px;
        background-color: #fff;
        box-sizing: border-box;
        .gameCenter-header{
            width: 100%;
            img{
                width: 34px;
                position: relative;
                top: 6px;
            }
            span{
                font-size: 30px;
                color: #333;
                font-weight: 700;
            }
            a{
                font-size: 22px;
                color: #666;
                position: absolute;
                right: 30px;
                span{
                    font-size: 32px;
                    color: #ccc;
                    position: relative;
                    top: 2px;
                }
            }
        }
        .gameCenter-container {
            width: 100%;
            margin-top: 20px;
            a{
                display: table;
                padding: 15px 0;
                .left{
                    width: 25%;
                    display: table-cell;
                    vertical-align: middle;
                    p{
                        width: 100%;
                        border-radius: 10px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            vertical-align: middle;
                            border-radius: 10px;
                        }
                    }
                }
                .right{
                    display: table-cell;
                    vertical-align: middle;
                    padding-left: 10px;
                    .gameName{
                        width: 220px;
                        font-size: 28px;
                        color: #333;
                        padding: 5px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .tags{
                        width: 220px;
                        font-size: 22px;
                        color: #999;
                        padding: 5px;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                }
            }
        }
    }
    #hotActivity-wraper{
        width: 100%;
        background-color: rgb(249,249,249);
        margin-top: 20px;
        /*padding-bottom: 40px;*/
        .hotActivity-header{
            width: 100%;
            padding: 30px;
            box-sizing: border-box;
            background-color: #fff;
            img{
                height: 34px;
                position: relative;
                top: 5px;
            }
            span{
                font-size: 30px;
                font-weight: 700;
                color: #333;
            }
            a{
                font-size: 22px;
                color: #666;
                position: absolute;
                right: 30px;
                span{
                    font-size: 32px;
                    color: #ccc;
                    position: relative;
                    top: 2px;
                }
            }
        }
        .hotActivity-container{
            width: 100%;
            overflow: hidden;
            padding: 10px 0;
            padding-right: 15px;
            /*padding-bottom: 20px;*/
            box-sizing: border-box;
            ul{
                width: 50%;
                padding: 15px 0;
                padding-top: 0;
                padding-left: 15px;
                box-sizing: border-box;
                /*border: 1px solid red;*/
                float: left;
                li{
                    width: 100%;
                    list-style: none;
                    background-color: #fff;
                    border-radius:15px;
                    overflow: hidden;
                    box-shadow: 0 3px 8px #ddd;
                    margin-top: 20px;
                    a{
                        width: 100%;
                        display: inline-block;
                        img{
                            width: 100%;
                        }
                    }
                    div{
                        width: 100%;
                        padding: 8px 15px 15px;
                        box-sizing: border-box;
                        position: relative;
                        .goodsName{
                            font-size: 26px;
                            height: 38px;
                            width: 100%;
                            line-height: 38px;
                            color: #333;
                            font-weight: 700;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                        }
                        .goodsInfo{
                            display: inline-block;
                            span{
                                font-size: 18px;
                                color: #ff3333;
                            }
                        }
                        .clickZan{
                            display: inline-block;
                            position: absolute;
                            right: 15px;
                            bottom: 10px;
                            color: #333;
                            line-height: 30px;
                            img{
                                height: 30px;
                                position: relative;
                                top: 5px;
                            }
                            span{
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
        }
        .scrollFalse{
            width: 100%;
            padding: 20px 0;
            margin: 10px 0;
            font-size: 26px;
            line-height: 30px;
            color: #666;
            text-align: center;
        }
        .scrollTrue{
            width: 100%;
            padding: 20px 0;
            margin: 10px 0;
            font-size: 26px;
            color: #666;
            line-height: 30px;
            position: relative;
            text-align: center;
            img{
                width: 28px;
                position: relative;
                top: 5px;
            }
        }
    }

    #mzsm-wraper{
        width: 100%;
        height: 80px;
        background-color: rgba(51,51,51,0.7);
        display: table;
        p{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #ccc;
            font-size: 24px;
            a{
                color: cornflowerblue;
            }
        }
    }

</style>
<style scoped>
    #banner-wraper #banner-pagination .swiper-pagination-bullet-active{
        background: white;
        opacity: 1;
    }
    .swiper-pagination-bullet {
        width: 20px;
        height: 3px;
        display: inline-block;
        border-radius: 0;
        background: #fff;
        opacity: 0.4;
    }
    /*.vue-waterfall-easy-container .vue-waterfall-easy-scroll[data-v-ded6b974]{*/
        /*position: static !important;*/
    /*}*/
</style>